{% extends "osk/osk_base.html" %}
{% load i18n %}
{% load pagination_tags %}
{% load staticfiles %}

{% block title %} {% trans "Explore SOS" %} - {{ block.super }} {% endblock %}

{% block body_class %}osk osk-list explore{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-4">
                <h2 class="page-title">{% trans "Explore SOS" %}</h2>
            </div>
            <div class="col-md-8">
                <p class="sos-actions">
                    {% if perms.osk.admin_sos %}
                    <a  id="open_ediclient_btn" href="#ediclient_container"
                        class="btn btn-large btn-primary" href=""><i class="glyphicon glyphicon-upload"></i> {% trans "Register a new  Sensor" %}</a>
                    {% endif %}
                    <a class="btn btn-large btn-info" target="_blank" href="{{ cap.public_capabilities_url }}"><i class="glyphicon glyphicon-new-window"></i> {% trans "Capabilities" %}</a>
                </p>
            </div>
            <!--div class="span3 input-append">
            <form  method="GET" action"/osk/">
            <input class="span2 input-small"  type="text" name="sosurl" placeholder="Remote SOS">
            <button class="btn" type="submit">Load</button>
            </form>
            </div-->
        </div>
    </div>
</div>

<div class="row" id="contain-slider">

    <article class="description tab-pane active" id="info">
        <div class="col-md-4">
            <h2><i class="glyphicon glyphicon-info-sign"></i> {% trans "Identification" %}</h2>
            <dl>
                <dt>{% trans "Title" %}</dt>
                <dd>{{ cap.identification.title }}</dd>
                <dt>{% trans "Abstract" %}</dt>
                <dd>{{ cap.identification.abstract }}</dd>
                <dt>{% trans "Keywords" %}</dt>
                <dd>{{ cap.identification.keywords|join:", " }}</dd>
            </dl>
            <h2><i class="glyphicon glyphicon-user"></i> {% trans "Provider" %}</h2>
            <p>{{ cap.provider.name }}</p>
            <dl>
                <dt>{% trans "Name" %}</dt>
                <dd>{{ cap.provider.contact.name }}</dd>
                <dt>{% trans "Organization" %}</dt>
                <dd>{{ cap.provider.contact.organization }}</dd>
                <dt>{% trans "Position" %}</dt>
                <dd>{{ cap.provider.contact.position }}</dd>
                <dt>{% trans "Address" %}</dt>
                <dd>{{ cap.provider.contact.address }}</dd>
                <dt>{% trans "Postcode" %}</dt>
                <dd>{{ cap.provider.contact.postcode }}</dd>
                <dt>{% trans "City" %}</dt>
                <dd>{{ cap.provider.contact.city }}</dd>
                <dt>{% trans "Region" %}</dt>
                <dd>{{ cap.provider.contact.region }}</dd>
                <dt>{% trans "Country" %}</dt>
                <dd>{{ cap.provider.contact.country }}</dd>
                <dt>{% trans "Email" %}</dt>
                <dd>{{ cap.provider.contact.email }}</dd>
                <dt>{% trans "Phone" %}</dt>
                <dd>{{ cap.provider.contact.phone }}</dd>
                <dt>{% trans "Fax" %}</dt>
                <dd>{{ cap.provider.contact.fax }}</dd>
                <dt>{% trans "Site" %}</dt>
                <dd class="break-word">{{ cap.provider.contact.site|urlize }}</dd>
            </dl>
        </div>

        <div class="col-md-8">
            <h2><i class="glyphicon glyphicon-map-marker"></i> {% trans "Sensors / Procedures" %}</h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="bg-info" style="padding: 15px;">
                        {% trans "Number of sensors:" %} <strong>{{ sensors|length  }}</strong>
                    </div>
                </div>
            </div>
            {% for sensor in sensors %}
            <article>
                <div class="content">
                    <h2>
                        {% if sensor.name %}
                          {{ sensor.name }}
                        {% else %}
                          {% trans "Sensor" %} {{ forloop.counter }}
                        {% endif %}
                    </h2>
                    <p>{{ sensor.description }}</p>
                    <p class="break-word"><small><b>Sensor ID: {{ sensor.id|urlize }}</b></small></p>
                    <p><b>Parameters: </b>
                        <table style="width: 100%; border-collapse: collapse;">
                        {% for oN in sensor.outputs %}
                        <tr><td style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;">
                        <a href="{{ oN.definition }}" target="_blank">{{ oN.name }}</a></td>
                        <td style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;">{{ oN.uom }}</td></tr>
                        <!--span style="padding-right:0.5em">
                        <a href="{{ oN.definition }}" target="_blank">{{ oN.name }}</a> ({{ oN.uom }})
                        </span-->
                        {% endfor %}
                        </table>
                    </p>
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            {% if sensor.isvalid %}
                              <a href="{% url "osk_describe_sensor" %}?format={{ 'text/html'|urlencode }}&sensor_id={{sensor.id|urlencode }}" target="_blank" data-toggle="modal" class="btn btn-mini btn-primary">{% trans "Sensor details" %}</a>
                            {% endif %}
                            {% if perms.osk.admin_sos %}
                              {% if sensor.isvalid %}
                                <a href="{% url "osk_upload" %}?procedureId={{ sensor.id }}" class="btn btn-mini  btn-success">{% trans "Upload observations" %}</a>
                                <a href="{{ sensor.id }}" download="{{ sensor.id }}" target="_blank" data-toggle="modal" class="btn btn-mini btn-success">Download SensorML</a>
                                <a href="../observations/service?service=SOS&version=2.0.0&request=GetObservation&MergeObservationsIntoDataArray=true&procedure={{ sensor.id }}" class="btn btn-mini  btn-success">{% trans "Download observations" %}</a>
                              {% endif %}
                              <a href="{% url "osk_deletesensor" %}?procedure={{ sensor.id }}" class="btn btn-mini btn-danger">{% trans "Delete sensor" %}</a>
                            {% endif %}
                        </div>
                    </div>
                    <!--div class="details">
                    <div class="meta">
                    <p> <a href="{% url "osk_upload" %}?procedureId={{ sensor.name }}">Upload observations</a>  </p>
                    <p class="abstract">{{ sensor.sensor.description|default:'No abstract provided.' }}</p>
                    <p class="Keywords">{{ sensor.sensor.keywords|join:', '|default:'No keywords provided' }}</p>
                    </div>
                    <div>
                    <ul>
                    {% for op in sensor.observable_properties %}
                    <li>{{ op }}</li>
                    {% endfor %}
                    </ul>
                    </div>
                    </div--> <!-- /.details -->
                </div> <!-- /.content -->
                <hr/>
            </article>

            <!--
            <dt>{{ sensor.name }}</dt>
            <dd>{{ sensor.id }}
            <ul>
            {% for op in sensor.observable_properties %}
            <li>{{ op }} <button class="btn btn-small">Upload</button> </li>
            {% endfor %}
            </li>
            </dd>
            -->
            {% endfor %}
            </dl>
        </div>
    </article>
</div>

<div id="ediclient_container" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h1>Register Sensor</h1>
            </div>
            <div class="modal-body">
                <div class="alert alert-block alert-info hide">
                    <h4 class="alert-heading loading-message"></h4>
                    <div class="progress progress-striped active">
                        <div class="bar" style="width: 100%;"></div>
                    </div>
                </div>
                <div class="alert alert-block alert-error hide">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <h4 class="alert-heading">Oh snap! You got an error!</h4>
                    <p class="error-message"></p>
                </div>
                <iframe id="ediclient_container_iframe" name="ediclient_container_iframe" src="" style="zoom:0.60" width="99.6%" height="90%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button id="save_metadata_btn" data-loading-text="Saving..." class="btn btn-primary">Register</button>
            </div>
        </div> <!-- /modal-content-->
    </div> <!-- /modal-dialog-->
</div>

{% endblock %}

{% block extra_script %}
<script src="{{STATIC_URL}}geosk/js/EdiProxy.js" type="text/javascript"></script>
{{ block.super }}
<script>
    {% get_current_language as  LANGUAGE_CODE %}
    var ediml_current_language = '{{ LANGUAGE_CODE }}';
    var ediml_client_url = "{{ STATIC_URL }}EDI-NG_client/SensorML20_lightweight_forLTER.html?";
    var ediml_proxy_url = '{% url "osk_ediproxy_importmd" %}';
    var ediml_edimlId = '';

    var parameters;
    if(parseInt(ediml_edimlId)){
        parameters['edit'] = ediml_edimlId
    } else {
        _parameters = {
            'user_username': '{{ request.user.username }}',
            'user_email': '{{ request.user.email }}',
            'user_profile_organization': '{{ request.user.get_profile.organization }}',
            'user_profile_email': '{{ request.user.get_profile.email }}',
            'user_groups': '{% for g in request.user.groups.all %}{% if not forloop.first %}, {% else  %}{% endif %}{{g.name }}{% endfor %}'
        };
        parameters = {'parameters': JSON.stringify(_parameters)}
    }

    var ediProxyConfig = {
        id_open_btn: 'open_ediclient_btn',
        id_container: 'ediclient_container',
        ediml_client_url: ediml_client_url,
        ediml_proxy_url: ediml_proxy_url,
        ediml_current_language: ediml_current_language,
        parameters: parameters,
        redirect_url: location.pathname
    }

    var ediProxy = new EdiProxy(ediProxyConfig);

    //open modal
    var hash = window.location.hash
    if(hash=='#ediclient_container'){
        $(hash).modal('show');
    }

</script>
{% endblock extra_script %}
